<template>
    <div class="register-page">
      <!-- 背景图 -->
      <div class="bg"></div>
  
      <!-- 注册表单 -->
      <el-row class="form-container">
        <el-col :span="12" :offset="6" class="form">
          <h1 class="title">注册账号</h1>
          <el-form :model="registerData" :rules="rules" ref="ruleFormRef" size="large" autocomplete="off">
            <!-- 登录名 -->
            <el-form-item label="登录名" prop="username">
              <el-input v-model="registerData.username"></el-input>
            </el-form-item>
  
            <!-- 密码 -->
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="registerData.password"></el-input>
            </el-form-item>
  
            <!-- 姓名 -->
            <el-form-item label="姓名" prop="fullName">
              <el-input v-model="registerData.fullName"></el-input>
            </el-form-item>
  
            <!-- 手机号 -->
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="registerData.phone"></el-input>
            </el-form-item>
  
            <!-- 邮箱 -->
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="registerData.email"></el-input>
            </el-form-item>
  
            <!-- 角色 -->
            <el-form-item label="角色" prop="role">
              <el-select v-model="registerData.role" placeholder="请选择角色">
                <el-option label="管理员" value="admin"></el-option>
                <el-option label="普通用户" value="user"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="地区" prop="area">
              <el-input v-model="registerData.area"></el-input>
            </el-form-item>
  
            <!-- 提交按钮 -->
            <el-form-item>
              <el-button class="button" type="primary" @click="register">注册</el-button>
            </el-form-item>
            <el-form-item>
              <el-link type="primary" :underline="false" @click="goToLogin">已有账号，去登录</el-link>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { ElMessage, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton, ElLink } from 'element-plus'
  import { usermainregisterService } from '@/api/user'
  import { useRouter } from 'vue-router'
  
  const registerData = ref({
    username: '',
    password: '',
    fullName: '',
    phone: '',
    email: '',
    role: '',
    area: ''

  })
  
  const router = useRouter()
  
  const ruleFormRef = ref(null)
  
  const register = async () => {
    const valid = await ruleFormRef.value.validate()
    if (valid) {
      try {
        const result = await usermainregisterService(registerData.value)
        ElMessage.success(result.msg ? result.msg : '注册成功')
        router.push('/login')
      } catch (error) {
        ElMessage.error('注册失败，请重试')
        console.error(error)
      }
    } else {
      console.log('校验失败')
    }
  }
  
  const goToLogin = () => {
    router.push('/login')
  }
  
  const rules = {
    loginName: [
      { required: true, message: '请输入登录名', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' }
    ],
    fullName: [
      { required: true, message: '请输入姓名', trigger: 'blur' }
    ],
    phone: [
      { required: true, message: '请输入手机号', trigger: 'blur' }
    ],
    email: [
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ],
    role: [
      { required: true, message: '请选择角色', trigger: 'change' }
    ]
  }
  </script>
  
  <style lang="scss" scoped>
  /* 样式 */
  .register-page {
    height: 100vh;
    background-color: #fff;
    position: relative; /* 相对定位，用于定位背景图 */
  }
  
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('@/assets/login_bg.jpg') no-repeat center / cover;
    z-index: 0;
    border-radius: 0 20px 20px 0;
  }
  
  .form-container {
    display: flex;
    justify-content: flex-end; /* 水平方向向右对齐 */
    align-items: center; /* 垂直方向居中对齐 */
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 720px; /* 调整注册表单的宽度 */
    background: rgba(255, 255, 255, 0.8); /* 设置透明白色背景 */
    border-radius: 10px;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
    padding: 50px; /* 调整内边距 */
  }
  
  .form {
    width: 100%; /* 充满父容器宽度 */
    display: flex;
    flex-direction: column;
    align-items: center;
  
    .title {
      margin-bottom: 20px;
    }
  
    .button {
      width: 100%;
    }
  }
  </style>
  